<template>
	<view class="con">
		<view class="container">
			<view class="btn1">
				<view class="arrow-box">
					<button class="arrow-icon" @tap="showPart('part1')">CPU</button>
					<view class="cu-modal" :class="part1Visible?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">CPU</view>
								<view class="action" @tap="hidePart('part1')">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<image class="image-2" :src="pcCompoent1" mode="widthFix" />
								<view class="box">
									<view>
										{{pcText1[0].text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="arrow-box">
					<button class="arrow-icon" @tap="showPart('part2')">散热</button>
					<view class="cu-modal" :class="part2Visible?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">散热</view>
								<view class="action" @tap="hidePart('part2')">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<image class="image-2" :src="pcCompoent2" mode="widthFix" />
								<view class="box">
									<view>
										{{pcText1[1].text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="arrow-box">
					<button class="arrow-icon" @tap="showPart('part3')">内存</button>
					<view class="cu-modal" :class="part3Visible?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">内存</view>
								<view class="action" @tap="hidePart('part3')">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<image class="image-2" :src="pcCompoent3" mode="widthFix" />
								<view class="box">
									<view>
										{{pcText1[2].text}}
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="arrow-box">
					<button class="arrow-icon" @tap="showPart('part4')">硬盘</button>
					<view class="cu-modal" :class="part4Visible?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">硬盘</view>
								<view class="action" @tap="hidePart('part4')">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<image class="image-2" :src="pcCompoent4" mode="widthFix" />
								<view class="box">
									<view>
										{{pcText1[3].text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="main-image">
				<image class="image-1" :src="arrowIcon" mode="widthFix" />
			</view>
			<view class="btn2">
				<view class="arrow-box">
					<button class="arrow-icon" @tap="showPart('part5')">电源</button>
					<view class="cu-modal" :class="part5Visible?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">电源</view>
								<view class="action" @tap="hidePart('part5')">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<image class="image-2" :src="pcCompoent5" mode="widthFix" />
								<view class="box">
									<view>
										{{pcText1[4].text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="arrow-box">
					<button class="arrow-icon" @tap="showPart('part6')">显卡</button>
					<view class="cu-modal" :class="part6Visible?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">显卡</view>
								<view class="action" @tap="hidePart('part6')">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<image class="image-2" :src="pcCompoent6" mode="widthFix" />
								<view class="box">
									<view>
										{{pcText1[5].text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="arrow-box">
					<button class="arrow-icon" @tap="showPart('part7')">主板</button>
					<view class="cu-modal" :class="part7Visible?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">主板</view>
								<view class="action" @tap="hidePart('part7')">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<image class="image-2" :src="pcCompoent7" mode="widthFix" />
								<view class="box">
									<view>
										{{pcText1[6].text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="arrow-box">
					<button class="arrow-icon" @tap="showPart('part8')">机箱</button>
					<view class="cu-modal" :class="part8Visible?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">机箱</view>
								<view class="action" @tap="hidePart('part8')">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<image class="image-2" :src="pcCompoent8" mode="widthFix" />
								<view class="box">
									<view>
										{{pcText1[7].text}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const db = wx.cloud.database();
	const _ = wx.cloud.database().command;
	export default {
		data() {
			return {
				arrowIcon: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/main-image2.png',
				pcCompoent1: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/CPU.jpg',
				pcCompoent2: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/sanre.jpg',
				pcCompoent3: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/neicun.jpg',
				pcCompoent4: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/yingpan.jpg',
				pcCompoent5: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/dianyuan.jpg',
				pcCompoent6: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/xianka.jpg',
				pcCompoent7: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/zhuban.jpg',
				pcCompoent8: 'cloud://environment-2gcojvyu5be9e36f.656e-environment-2gcojvyu5be9e36f-1314864713/introduce/jixiang.jpg',
				pcText1: [],
				part1Visible: false,
				part2Visible: false,
				part3Visible: false,
				part4Visible: false,
				part5Visible: false,
				part6Visible: false,
				part7Visible: false,
				part8Visible: false,
			}
		},
		methods: {
			showPart(part) {
				this[part + 'Visible'] = true;
			},
			hidePart(part) {
				this[part + 'Visible'] = false;
			},
		},
		onLoad() {
			wx.cloud.database().collection('introduce').get().then(res => {
				this.pcText1 = res.data
			})
			
		}
	}
</script>

<style>
	.con {
		width: 750rpx;
		height: 952rpx;
		margin-top: 230rpx;
	}
	.container {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		justify-content: center;

		/* height: 100vh; */
	}

	.btn1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.main-image {
		display: flex;
		justify-content: center;
	}

	.btn2 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.arrow-box {
		position: relative;
	}

	.arrow-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150rpx;
		height: 50rpx;
		color: white;
		background-color: #1296db;
		font-weight: bold;
		font-size: 25rpx;
	}
</style>
